/*
 * @Author: 梦付千秋星垂野 465943794@qq.com
 * @Date: 2022-10-18 09:49:53
 * @LastEditors: 梦付千秋星垂野 465943794@qq.com
 * @LastEditTime: 2022-10-18 13:29:31
 * @FilePath: /practise--chat-app-react-nodejs/pubilc/src/components/welcome.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Robot from "../assets/robot.gif";

export default function Welcome() {
    const [userName, setUserName] = useState("");
    useEffect(()=>{
    const fetchData= async () => {
        setUserName(
            await JSON.parse(
            localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
            ).username
        );
        }
        fetchData()
    }, []);
    return (
        <Container>
        <img src={Robot} alt="" />
        <h1>
            Welcome, <span>{userName}!</span>
        </h1>
        <h3>Please select a chat to Start messaging.</h3>
        </Container>
    );
    }
const Container = styled.div`
display: flex;
justify-content: center;
  align-items: center;
  color: white;
  flex-direction: column;
  img {
    height: 20rem;
  }
  span {
    color: #4e0eff;
  }
`